<template>
  <transition name="dialog-fade">
    <el-dialog
      v-if="showDialog"
      :title="dialogTitle"
      class="dialog-component"
      :visible.sync="showDialog"
      width="600px"
      @close="closeDialog(0)"
    >
      <div class="scroll-dialog">
        <el-form
          label-position="top"
          ref="formInfo"
          :model="formInfo"
          class="demo-form-inline"
          :inline="true"
        >
          <!--        <el-form-item prop="GATHER_SNO" label="采编流水号" required>-->
          <!--          <el-input v-model="formInfo.GATHER_SNO" />-->
          <!--        </el-form-item>-->
          <el-form-item prop="ORDER_DATE" label="采编日期" >
            <!--          <el-input v-model="formInfo.ORDER_DATE" />-->
            <el-date-picker
              v-model="formInfo.ORDER_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <!--        <el-form-item prop="MEETING_ID" label="股东大会ID" >-->
          <!--          <el-input v-model="formInfo.MEETING_ID" />-->
          <!--        </el-form-item>-->
          <el-form-item prop="INTERNAL_MEETING_ID" label="公司部股东大会ID">
            <el-input v-model="formInfo.INTERNAL_MEETING_ID" />
          </el-form-item>
          <el-form-item prop="BULLETIN_ID" label="公告ID" >
            <el-input v-model="formInfo.BULLETIN_ID" autosize/>
          </el-form-item>
          <el-form-item prop="SEC_CODE" label="证券代码" >
            <el-input v-model="formInfo.SEC_CODE" autosize/>
          </el-form-item>
          <el-form-item prop="SEC_ABBR" label="证券简称" >
            <el-input v-model="formInfo.SEC_ABBR" autosize/>
          </el-form-item>
          <el-form-item prop="BULLETIN_TYPE" label="公告类型" >
            <el-input v-model="formInfo.BULLETIN_TYPE" autosize/>
          </el-form-item>
          <el-form-item prop="MEETING_NAME" label="股东大会名称" >
            <el-input v-model="formInfo.MEETING_NAME" />
          </el-form-item>
          <el-form-item prop="MEETING_BEGIN_DATE" label="股东大会开始日" >
            <!--          <el-input v-model="formInfo.MEETING_BEGIN_DATE" />-->
            <el-date-picker
              v-model="formInfo.MEETING_BEGIN_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="MEETING_END_DATE" label="股东大会结束日" >
            <!--          <el-input v-model="formInfo.MEETING_END_DATE" />-->
            <el-date-picker
              v-model="formInfo.MEETING_END_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="IS_TRADE_SYS_VOTE" label="是否通过上交所投票" >
            <el-radio v-model="formInfo.IS_TRADE_SYS_VOTE" label="1">是</el-radio>
            <el-radio v-model="formInfo.IS_TRADE_SYS_VOTE" label="0">否</el-radio>
          </el-form-item>
          <el-form-item prop="A_CODE" label="A股产品代码" >
            <el-input v-model="formInfo.A_CODE" />
          </el-form-item>
          <el-form-item prop="A_ABBR" label="A股简称" >
            <el-input v-model="formInfo.A_ABBR" />
          </el-form-item>
          <el-form-item prop="A_REG_DATE" label="A股登记日" >
            <!--          <el-input v-model="formInfo.A_REG_DATE" />-->
            <el-date-picker
              v-model="formInfo.A_REG_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="A_LAST_DATE" label="A股最后交易日" >
            <!--          <el-input v-model="formInfo.A_LAST_DATE" />-->
            <el-date-picker
              v-model="formInfo.A_LAST_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="B_CODE" label="B股代码" >
            <el-input v-model="formInfo.B_CODE" />
          </el-form-item>
          <el-form-item prop="B_ABBR" label="B股简称" >
            <el-input v-model="formInfo.B_ABBR" />
          </el-form-item>
          <el-form-item prop="B_REG_DATE" label="B股登记日" >
            <!--          <el-input v-model="formInfo.B_REG_DATE" />-->
            <el-date-picker
              v-model="formInfo.B_REG_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="B_LAST_DATE" label="B股最后交易日" >
            <!--          <el-input v-model="formInfo.B_LAST_DATE" />-->
            <el-date-picker
              v-model="formInfo.B_LAST_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="PRIORITY_CODE" label="优先股代码" >
            <el-input v-model="formInfo.PRIORITY_CODE" />
          </el-form-item>
          <el-form-item prop="PRIORITY_ABBR" label="优先股简称" >
            <el-input v-model="formInfo.PRIORITY_ABBR" />
          </el-form-item>
          <el-form-item prop="PRIORITY_REG_DATE" label="优先股登记日" >
            <!--          <el-input v-model="formInfo.PRIORITY_REG_DATE" />-->
            <el-date-picker
              v-model="formInfo.PRIORITY_REG_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="PRIORITY_LAST_DATE" label="优先股最后交易日" >
            <!--          <el-input v-model="formInfo.PRIORITY_LAST_DATE" />-->
            <el-date-picker
              v-model="formInfo.PRIORITY_LAST_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="RECOVERY_PRIORITY_CODE" label="恢复表决权的优先股代码" >
            <el-input v-model="formInfo.RECOVERY_PRIORITY_CODE" />
          </el-form-item>
          <el-form-item prop="RECOVERY_PRIORITY_ABBR" label="恢复表决权的优先股简称" >
            <el-input v-model="formInfo.RECOVERY_PRIORITY_ABBR" />
          </el-form-item>
          <el-form-item prop="RECOVERY_PRIORITY_REG_DATE" label="恢复表决权优先股登记日" >
            <!--          <el-input v-model="formInfo.RECOVERY_PRIORITY_REG_DATE" />-->
            <el-date-picker
              v-model="formInfo.RECOVERY_PRIORITY_REG_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="RECOVERY_PRIORITY_LAST_DATE" label="恢复表决权优先股最后交易日" >
            <!--          <el-input v-model="formInfo.RECOVERY_PRIORITY_LAST_DATE" />-->
            <el-date-picker
              v-model="formInfo.RECOVERY_PRIORITY_LAST_DATE"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="MEETING_TYPE" label="股东大会类型" >
            <el-input v-model="formInfo.MEETING_TYPE" />
          </el-form-item>
          <el-form-item prop="BULLETIN_DATE" label="公告日期" >
            <el-input v-model="formInfo.BULLETIN_DATE" />
          </el-form-item>
          <el-form-item prop="TOPIC_NUMBER" label="总议案数" >
            <el-input v-model="formInfo.TOPIC_NUMBER" />
          </el-form-item>
          <el-form-item prop="MEETING_ADDR" label="开会地点" >
            <el-input v-model="formInfo.MEETING_ADDR" />
          </el-form-item>
          <el-form-item prop="MEETING_TIME" label="开会时间" >
            <el-input v-model="formInfo.MEETING_TIME" />
          </el-form-item>
          <el-form-item prop="LC_CONFIRM_STATUS" label="确认状态" >
            <!--          <el-input v-model="formInfo.LC_CONFIRM_STATUS" />-->
            <el-radio v-model="formInfo.LC_CONFIRM_STATUS" label="1">是</el-radio>
            <el-radio v-model="formInfo.LC_CONFIRM_STATUS" label="0">否</el-radio>
          </el-form-item>
          <el-form-item prop="URL_ADDRESS" label="公告URL地址" >
            <el-input v-model="formInfo.URL_ADDRESS" />
          </el-form-item>
          <el-form-item prop="TRADEMARKET" label="交易市场" >
            <el-input v-model="formInfo.TRADEMARKET" />
          </el-form-item>
          <el-form-item prop="PRIORITY_COV_RATIO" label="优先股转换比例" >
            <el-input v-model="formInfo.PRIORITY_COV_RATIO" />
          </el-form-item>
          <el-form-item prop="RECOVERY_PRIORITY_COV_RATIO" label="恢复表决权优先股转换比例" >
            <el-input v-model="formInfo.RECOVERY_PRIORITY_COV_RATIO" />
          </el-form-item>
          <el-form-item prop="MEETING_TIME_STR" label="现场开会时间" >
            <el-input v-model="formInfo.MEETING_TIME_STR" />
          </el-form-item>
          <el-form-item prop="SECURITY_TYPE" label="证券类型" >
            <el-input v-model="formInfo.SECURITY_TYPE" />
          </el-form-item>
          <el-form-item prop="SECURITY_SUB_TYPE" label="证券子类型" >
            <el-input v-model="formInfo.SECURITY_SUB_TYPE" />
          </el-form-item>
          <el-form-item prop="WEB_TITLE" label="上网标题" >
            <el-input v-model="formInfo.WEB_TITLE" />
          </el-form-item>
          <el-form-item style="text-align: right;">
            <!--            :disabled="formInfo.LC_CONFIRM_STATUS!=='0'"-->
            <el-button
              type="primary"
              @click="submitForm()"
            >确定</el-button>
            <el-button @click="closeDialog(0)">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </transition>
</template>

<script>
export default {
  name: 'DialogComponent',
  props: {
    dialogTitle: {
      type: String,
      default: '股东大会'
    },
    itemInfo: {
      type: Object,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      showDialog: false,
      formInfo: JSON.parse(JSON.stringify(this.itemInfo))
    }
  },
  methods: {
    // 保存操作
    submitForm() {
      console.log(this.formInfo)
      const that = this
      // const params = Object.assign(that.formInfo, {})
      if (this.formInfo['methodType'] === 'create') {
        console.log('create mode')
        that.$store.dispatch('editing/insertBasicInfo', this.formInfo).then(
          res => {
            if (res.data) {
              console.log(res.data)
            }
          }
        )
      } else {
        console.log('update mode')
        that.$store.dispatch('editing/updateBasicInfo', this.formInfo).then(
          res => {
            if (res.data) {
              console.log(res.data)
            }
          }
        )
      }
      this.closeDialog(true)
    },

    // 关闭弹框
    closeDialog(flag) {
      this.$refs['formInfo'].resetFields()
      this.showDialog = false
      this.$emit('closeDialog', flag)
    }
  }
}
</script>

<style scoped lang="scss">
.el-input{
  width: 250px;
}

.scroll-dialog{
  height: 600px;
  overflow: auto;
  margin: 10px;
}

.dialog-fade-enter-active {
  -webkit-animation: dialog-fade-in 0.3s;
  animation: dialog-fade-in 0.3s;
}
.dialog-fade-leave-active {
  -webkit-animation: dialog-fade-out 0.3s;
  animation: dialog-fade-out 0.3s;
}
@-webkit-keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes dialog-fade-in {
  0% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@-webkit-keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
@keyframes dialog-fade-out {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate3d(0, -20px, 0);
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}
</style>
